<template>
  <div class="box">
    <NavBar
      @goBack="goBack"
      :title="title"
    ></NavBar>
    <div class="password">
      <h1>Account Verification</h1>

      <van-field
        v-if="!isNext"
        v-model="account"
        type="tel"
        label
        placeholder="Please input account"
      />

      <div v-if="isNext">
        <!-- 输入密码 -->
        <van-field
          v-if="isOpen"
          v-model="password"
          type="text"
          label
          placeholder="Please input password"
          :right-icon="passwordIcon"
          @click-right-icon="switchs"
        />
        <van-field
          v-if="!isOpen"
          v-model="password"
          type="password"
          label
          placeholder="Please input password"
          :right-icon="passwordCloseIcon"
          @click-right-icon="switchs"
        />

        <van-field
          v-if="confirmIsOpen"
          v-model="confirmPassword"
          type="text"
          label
          placeholder="Please confirm password"
          :right-icon="passwordIcon"
          @click-right-icon="confirmSwitchs"
        />
        <van-field
          v-if="!confirmIsOpen"
          v-model="confirmPassword"
          type="password"
          label
          placeholder="Please confirm password"
          :right-icon="passwordCloseIcon"
          @click-right-icon="confirmSwitchs"
        />
      </div>

      <div
        class="code"
        v-if="!isNext"
      >
        <div>
          <van-field
            v-model="code"
            type="password"
            placeholder="Verification Code"
          />
        </div>
        <div>
          <van-button
            type="primary"
            block
            @click="getCode"
          >
            <van-count-down
              v-if="isCode"
              ref="countDown"
              millisecond
              :time="60000"
              :auto-start="false"
              format="Reacquire( ss s )"
              @finish="finish"
            />
            <span v-if="!isCode">Get a verification code</span>
          </van-button>
        </div>
      </div>
      <div v-if="!isNext">
        <van-button
          v-if="buttonType"
          type="info"
          size="large"
          @click="reset"
        >{{ subText }}</van-button>
        <van-button
          v-if="!buttonType"
          type="primary"
          size="large"
          @click="reset"
        >{{ subText }}</van-button>
      </div>
      <div v-if="isNext">
        <van-button
          v-if="buttonType"
          type="info"
          size="large"
          @click="confirm"
        >{{ subText }}</van-button>
        <van-button
          v-if="!buttonType"
          type="primary"
          size="large"
          @click="confirm"
        >{{ subText }}</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
import { Password, validata, qualified } from '@/model/passwordInstance'
import { interfaceUtils } from '../../model/interface'
import { sendSms, updatepassword } from 'api/user'
import { Toast } from 'vant'

export default {
  name: 'register',
  components: {
    NavBar
  },
  data() {
    return {
      passwordCloseIcon: require('assets/image/icon_no_eye.png'),
      passwordIcon: require('assets/image/icon_eye.png'),
      isOpen: false,
      confirmIsOpen: false,
      buttonType: false,
      isCode: false,
      isTime: true,
      timer: {},
      second: 60,
      title: '',
      account: '',
      password: '',
      confirmPassword: '',
      code: '',
      isNext: false,
      subText: 'Reset Password',
      pageId: '',
      login_token: ''
    }
  },
  watch: {
    password: function(newValue, oldValue) {
      this.password = newValue.replace(/\s+/g, '')
      if (
        qualified(this.code) &&
        qualified(this.account) &&
        qualified(this.password) &&
        qualified(this.confirmPassword)
      ) {
        this.buttonType = true
      } else {
        this.buttonType = false
      }
      // this.buttonType = true
    },
    confirmPassword: function(newValue, oldValue) {
      this.confirmPassword = newValue.replace(/\s+/g, '')
      if (
        qualified(this.code) &&
        qualified(this.account) &&
        qualified(this.password) &&
        qualified(this.confirmPassword)
      ) {
        this.buttonType = true
      } else {
        this.buttonType = false
      }
      // this.buttonType = true
    },
    code: function(newValue, oldValue) {
      setTimeout(() => {
        this.code = newValue.replace(/\s+/g, '')

        if (this.code) {
          if (this.account) {
            this.buttonType = true
          } else {
            this.buttonType = false
          }
        } else {
          this.buttonType = false
        }
      }, 20)
    },
    account: function(newValue, oldValue) {
      this.account = newValue.replace(/\s+/g, '')
      if (this.code) {
        if (this.account) {
          this.buttonType = true
        } else {
          this.buttonType = false
        }
      } else {
        this.buttonType = false
      }
    },
    isNext: function(newValue, oldValue) {
      if (this.isNext) {
        if (
          qualified(this.code) &&
          qualified(this.account) &&
          qualified(this.password) &&
          qualified(this.confirmPassword)
        ) {
          this.buttonType = true
        } else {
          this.buttonType = false
        }
      }
    }
  },
  mounted() {
    let pageId = this.$route.params.id
    this.pageId = pageId
    /**
     * pageId 从哪跳转的
     * 1 忘记密码
     * 2 修改密码
     */
    if (pageId == undefined) {
      this.$router.replace({
        path: '/login'
      })
    } else if (pageId == 1) {
      // this.login_token = interfaceUtils.login_token
    } else {
      // this.login_token = this.$store.state.app.token
    }
  },

  methods: {
    goBack() {
      if (this.pageId == 1) {
        this.$router.replace({
          path: '/login'
        })
      } else {
        this.$router.replace({
          path: '/main'
        })
      }
    },
    finish() {
      this.isCode = false
      //   console.log('完成')
    },
    reset() {
      if (this.buttonType) {
        this.isNext = true
        this.buttonType = false
        this.subText = 'Confirm'
      }
    },
    confirm() {
      //   alert('注册')
      const password = new Password(this.account, this.password, this.confirmPassword, this.code)
      // const login_token = this.login_token
      // console.log(login_token)
      if (validata(password, Password)) {
        // alert('登陆')
        // console.log('22')
        let data = password._getData()
        updatepassword(data)
          .then(res => {
            // console.log(res)
            // this.$router.replace({
            //   path: '/login'
            // })
            this.goBack()
            Toast.success({
              message: res.message
            })
          })
          .catch(err => {
            // console.log(err)
            Toast.fail({
              message: err
            })
          })
      }
    },

    switchs() {
      //   alert('55')
      this.isOpen = !this.isOpen
    },
    confirmSwitchs() {
      this.confirmIsOpen = !this.confirmIsOpen
    },
    getCode() {
      // alert('55')
      //   Toast.success({
      //     message: 'OK'
      //   })
      //   Toast.fail({
      //     message: 'netWork Err'
      //   })

      //切换组件
      if (qualified(this.account)) {
        const data = {
          phone: this.account,
          userType: 'consumer'
        }
        sendSms(data)
          .then(res => {
            // console.log(res)
            this.isCode = true

            //是否过了60s 或 第一次
            if (this.isTime) {
              this.isTime = false
              let second = this.second
              const timer = setInterval(() => {
                second--
                this.second = second
                if (second) {
                  // console.log(second)
                  //donothing
                } else {
                  this.isTime = true
                  clearInterval(timer)
                }
              }, 1000)

              setTimeout(() => {
                this.$refs.countDown.start()
                // console.log('请求')
              }, 20)
            }
          })
          .catch(err => {
            Toast.fail({
              message: err
            })
            // console.log('err', err)
          })
      } else {
        Toast.fail({
          message: '账号为空'
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import 'assets/css/password/password.scss';
</style>
